<script lang="ts" setup>
import { ref } from 'vue'
import { getSearchTipsAPI, postSearchAPI } from '@/services/search'
const { safeArea } = uni.getWindowInfo()
// 搜索框内容
const searchValue = ref('')
const searchResults = ref<string[]>([])
const onInput = async (e: string) => {
  searchValue.value = e
  let res = await getSearchTipsAPI(e)
  console.log(res)
  searchResults.value = res.result.ids
}
const onSearch = async (e: any) => {
  console.log(e)
  let res = await postSearchAPI(e)
}
</script>
<template>
  <view class="viewport">
    <view class="search" :style="{ paddingTop: safeArea?.top + 'px' }">
      <navigator open-type="navigateBack" class="back icon-left" hover-class="none"></navigator>
      <!-- 搜索框 -->
      <uni-search-bar
        v-model="searchValue"
        class="searchBar"
        @confirm="onSearch"
        placeholder="请输入商品名"
        clearButton="auto"
        cancelButton="none"
        :radius="20"
        :focus="true"
        @input="onInput"
      >
      </uni-search-bar>
    </view>
    <view class="container">
      <view class="item" v-for="(item, index) in searchResults" :key="index">
        <view class="title">{{ item }}</view>
      </view>
    </view>
  </view>
</template>
<style scoped lang="scss">
:global(.uni-searchbar) {
  padding: 0 10px !important;
}
.viewport {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f3f4f4;
}
.search {
  position: relative;
  display: flex;
  padding: 0 10px;
  background-color: #fff;

  .back {
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .searchBar {
    height: 40px;
  }
}
.container {
  flex: 1;
  .item {
    display: flex;
    border-bottom: 1px solid #f3f4f4;
  }
}
</style>
